<template>
    <view class="page-main">
        <liu-easy-map ref="liuEasyMap" :centerLat="'36.05709'" :centerLng="'103.82538'" :scale="14"
            :markerData="markerData" :polygons="polygons" @clickMarker="markerClick"></liu-easy-map>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                markerData: [{
                    id: 1,
                    name: '上海杉达学院', //标记点展示名字
                    address: '上海市浦东新区金海路2727号',
                    latitude: '121.66', //标记点纬度
                    longitude: '31.27', //标记点经度
                    markerUrl: 'https://img0.baidu.com/it/u=550544800,2229099292&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', //标记点图标地址
                    iconWidth: 32, //标记点图标宽度
                    iconHeight: 32, //标记点图标高度
                    calloutColor: '#ffffff', //气泡窗口 文本颜色
                    calloutFontSize: 14, //气泡窗口 文本大小
                    calloutBorderRadius: 6, //气泡窗口 边框圆角
                    calloutPadding: 8, //气泡窗口 文本边缘留白
                    calloutBgColor: '#0B6CFF', //气泡窗口 背景颜色
                    calloutDisplay: 'ALWAYS', //气泡窗口 展示类型 默认常显 'ALWAYS' 常显 'BYCLICK' 点击显示
                }, {
                    id: 2,
                    name: '测试地址', //标记点展示名字
                    address: '测试地址详细地址测试地址详细地址测试地址详细地址测试地址详细地址',
                    latitude: "36.05064",
                    longitude: "103.82538"
                }],
                //展示区域点位信息
                polygons: [{
                    points: [{
                        latitude: "36.06637",
                        longitude: "103.82471"
                    }, {
                        latitude: "36.06255",
                        longitude: "103.82321"
                    }, {
                        latitude: "36.06234",
                        longitude: "103.81928"
                    }, {
                        latitude: "36.06036",
                        longitude: "103.82175"
                    }, {
                        latitude: "36.05653",
                        longitude: "103.82152"
                    }, {
                        latitude: "36.05953",
                        longitude: "103.82476"
                    }, {
                        latitude: "36.05690",
                        longitude: "103.82785"
                    }, {
                        latitude: "36.06023",
                        longitude: "103.82747"
                    }, {
                        latitude: "36.06243",
                        longitude: "103.83014"
                    }, {
                        latitude: "36.06245",
                        longitude: "103.82616"
                    }], //经纬度数组
                    strokeWidth: 2, //描边的宽度
                    strokeColor: "#FF000060", //描边的颜色
                    fillColor: "#FF000090" //填充颜色
                }]
            }
        },
        methods: {
            //点击标记点
            markerClick(e) {
                console.log('点击标记点信息：', e)
            }
        }
    }
</script>

<style lang="scss">
    .page-main {
        width: 100%;
        height: 100vh;
    }
</style>